<!DOCTYPE html>
<html style="overflow: scroll">
<head>
    <title></title>
    <#include "/header.html">
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/audioplayer.css" />
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/map/OpenLayers/theme/default/style.css" />
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/map/demoComm.css" />
    <script type="text/javascript" src="${request.contextPath}/statics/map/OpenLayers/OpenLayers.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/map/GeoGlobeJS.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/map/demoComm.js"></script>
    <style type="text/css">
        .form-group{
            margin-bottom: 5px;
        }
        .control-label{
            padding-right: 5px;
        }
        .bottom-button{
            float: right;
            padding-right: 15px;
        }
        #map {
            padding: 0;
            margin: 0;
            height: 400px;
            width: 600px;
        }
        #photo_li_01 #photo_li_02 #photo_li_03{
            float: left;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div class="col-sm-2" style="width: 80%; height: 550px; padding: 0px">
        <!--音频+视频+截图-->
        <div class="col-sm-2" style="width: 65%;  height:550px ; padding: 0px ;overflow-y: scroll ; float: left">
            <!--音频-->
            <div style="width: 100%; float: top">
                <audio preload="" controls src="${request.contextPath}/statics/resource/nosound.mp3"></audio>
                <script>
                    $(function() {
                        $('audio').audioPlayer();
                    });
                </script>
            </div>
            <!--视频-->
            <div id="video_play" style="width: 100%; height: 60% ; background-color: #000 ; float: top">
                <div class="video" id="CuPlayer"></div>
            </div>
            <!--截图-->
            <div id="imglist" style="width: 100% ; height: 30% ; position: absolute; bottom: 0;">
                <ul class="form-group" style="width: 100% ; height: 100% ; padding-left: 0px ; position: absolute; bottom: 0;">
                    <li id="photo_li_01" data-src="${request.contextPath}/statics/images/init.png"
                        data-sub-html="<h4>暂无违章图片</h4>" data-pinterest-text="Pin it1"
                        data-tweet-text="share on twitter 1"
                        style="float: left ; margin-left:1px ; width: 33% ; height: 100% ; list-style-type: none ; text-align:center ;vertical-align: bottom">

                        <span>
                            <button type="button" @click="">截取图片1</button>
                            <button type="button" @click="">选取图片1</button>
                        </span>
                        <a href="">
                            <img id="photo_01" src="${request.contextPath}/statics/images/init.png" style="width:100% ; height: 80% ; margin-top: 5px;">
                        </a>
                    </li>
                    <li id="photo_li_02" data-src="${request.contextPath}/statics/images/init.png"
                        data-sub-html="<h4>暂无违章图片</h4>" data-pinterest-text="Pin it1"
                        data-tweet-text="share on twitter 1"
                        style="float: left ; margin-left:1px ; width: 33% ; height: 100% ; list-style-type: none; text-align:center">

                        <span>
                            <button type="button" @click="">截取图片2</button>
                            <button type="button" @click="">选取图片2</button>
                        </span>
                        <a href="">
                            <img id="photo_02" src="${request.contextPath}/statics/images/init.png" style="width:100% ; height: 80% ; margin-top: 5px;">
                        </a>

                    </li>
                    <li id="photo_li_03" data-src="${request.contextPath}/statics/images/init.png"
                        data-sub-html="<h4>暂无违章图片</h4>" data-pinterest-text="Pin it1"
                        data-tweet-text="share on twitter 1"
                        style="float: left ; margin-left:1px ; width: 33% ; height: 100% ; list-style-type: none ; text-align: center">

                         <span>
                            <button type="button" @click="">截取图片3</button>
                            <button type="button" @click="">选取图片3</button>
                        </span>
                        <a class="form-group" href="" style="padding-bottom: 0px; height: 100%; width: 100%">
                            <img id="photo_03" src="${request.contextPath}/statics/images/init.png" style="width:100% ; height: 80% ; margin-top: 5px;">
                        </a>

                    </li>
                </ul>


                <!--<div class="demo-gallery">-->
                    <!--<div class="gallery-name">-->
                        <!--<span style="width: 33% ; float: left ; text-align: center">-->
                            <!--<button type="button" onclick="">截取图片1</button>-->
                            <!--<button type="button" onclick="">选取图片1</button>-->
                        <!--</span>-->
                        <!--<span style="width: 33% ; float: left ; text-align: center">-->
                            <!--<button type="button" onclick="">截取图片2</button>-->
                            <!--<button type="button" onclick="">选取图片2</button>-->
                        <!--</span>-->
                        <!--<span style="width: 33% ; float: right ; text-align: center">-->
                            <!--<button type="button" onclick="">截取图片3</button>-->
                            <!--<button type="button" onclick="">选取图片3</button>-->
                        <!--</span>-->
                    <!--</div>-->

                    <!--<ul id="lightgallery" style="list-style-type: none; padding: 2px; padding-top: 0px; ">-->
                        <!--<li id="photo_li_01" data-src="${request.contextPath}/statics/images/init.png"-->
                            <!--data-sub-html="<h4>暂无违章图片</h4>" data-pinterest-text="Pin it1"-->
                            <!--data-tweet-text="share on twitter 1"-->
                            <!--style="border: 2px solid #0000FF ; float: left">-->
                            <!--<a href="" style="padding-bottom: 0px;">-->
                                <!--<img id="photo_01" src="${request.contextPath}/statics/images/init.png" width="190px" height="120px">-->
                            <!--</a>-->
                        <!--</li>-->

                        <!--<li id="photo_li_02" data-src="${request.contextPath}/statics/images/init.png"-->
                            <!--data-sub-html="<h4>暂无违章图片</h4>" data-pinterest-text="Pin it1"-->
                            <!--data-tweet-text="share on twitter 1"-->
                            <!--&gt;-->

                            <!--<a href="">-->
                                <!--<img id="photo_02" src="${request.contextPath}/statics/images/init.png" width="190px" height="120px">-->
                            <!--</a>-->
                        <!--</li>-->

                        <!--<li id="photo_li_03" data-src="${request.contextPath}/statics/images/init.png"-->
                            <!--data-sub-html="<h4>暂无违章图片</h4>" data-pinterest-text="Pin it1"-->
                            <!--data-tweet-text="share on twitter 1"-->
                            <!--&gt;-->

                            <!--<a href="">-->
                                <!--<img id="photo_03" src="${request.contextPath}/statics/images/init.png" width="190px" height="120px">-->
                            <!--</a>-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->


            </div>
        </div>
        <!--信息-->
        <div class="col-sm-10 form-horizontal" style="width: 35%; height:550px ;padding: 0px ; overflow-y: scroll ; float: left">
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">上报用户</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.userName" placeholder="上报用户" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">上报人车牌</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.plateNumber" placeholder="上报人车牌" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">联系方式</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.phone" placeholder="联系方式" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">IMEI号</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.imei" placeholder="IMEI号" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">上报类型</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="上报类型" v-model="reportInfo.type">
                        <option disabled value="">请选择上报类型</option>
                        <option v-for="type in typeObject.reportType" :value="type.value">{{type.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">上报时间</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.time" placeholder="上报时间" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">上报地点</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" style="width: 70%; float: left" width="80%" v-model="reportInfo.address" placeholder="上报地点" readonly/>
                    <input type="button" class="btn btn-primary" @click="showMapView" style="width: 30%" value="地图"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">违法地点</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" style="float: left ; width: 80%" v-model="reportInfo.location" placeholder="违法地点" readonly/>
                    <!--<input type="button" class="btn btn-primary" style="width: 20%" value="s" @click="illegalLocationList"/>-->
                    <a class="btn btn-primary" @click="illegalLocationList" style="width: 20%"><i class="fa fa-search"></i></a>

                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">报警内容</div>
                <div class="col-sm-10" style="width: 70%;">
                    <!--<input type="text" class="form-control" width="80%" v-model="reportInfo.alarmDesc" placeholder="报警内容" />-->
                    <textarea class="form-control" width="80%" v-model="reportInfo.alarmDesc" placeholder="报警内容" rows="3"></textarea>
                </div>
            </div>
            <!--不知道为啥点击之后隐藏下三项-->
            <!--<div class="form-group">-->
                <!--<div class="col-sm-2 control-label" style="width: 30%;">事件类型</div>-->
                <!--<div class="col-sm-10" style="width: 70%;">-->
                    <!--<input type="text" class="form-control" width="80%" v-model="reportInfo.eventType" placeholder="事件类型" readonly/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<div class="col-sm-2 control-label" style="width: 30%;">事件级别</div>-->
                <!--<div class="col-sm-10" style="width: 70%;">-->
                    <!--<input type="text" class="form-control" width="80%" v-model="reportInfo.eventLevel" placeholder="事件级别" readonly/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<div class="col-sm-2 control-label" style="width: 30%;">事件细类</div>-->
                <!--<div class="col-sm-10" style="width: 70%;">-->
                    <!--<input type="text" class="form-control" width="80%" v-model="reportInfo.eventThinType" placeholder="事件细类" readonly/>-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">号牌种类</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="号牌类型" v-model="reportInfo.illegalPlateType">
                        <option disabled value="">请选择号牌类型</option>
                        <option v-for="plateNumberType in plateNumberTypeObject.plateNumberType" :value="plateNumberType.value">{{plateNumberType.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">违法车辆</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" style="width: 30% ; float: left"  placeholder="号牌类型" v-model="reportInfo.illegalPlateArea">
                        <option disabled value="">请选择</option>
                        <option v-for="plateNumberArea in plateNumberAreaObject.plateNumberArea" :value="plateNumberArea.value">{{plateNumberArea.text}}</option>
                    </select>
                    <input type="text" class="form-control" style="width: 40% ; float: left" v-model="reportInfo.illegalPlateNumber" placeholder="号码"/>
                    <input type="button" class="btn btn-primary" @click="getVehicleInfo" style="width: 30% ; float: right" value="获取"/>

                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">行驶方向</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="行驶方向" v-model="reportInfo.direction">
                        <option disabled value="">请选择行驶方向</option>
                        <option v-for="direction in directionObject.moveDirection" :value="direction.value">{{direction.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">行驶车道</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="行驶车道" v-model="reportInfo.lane">
                        <option disabled value="">请选择行驶车道</option>
                        <option v-for="lane in laneObject.moveLane" :value="lane.value">{{lane.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">违法类型</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="违法类型" v-model="reportInfo.illegalType">
                        <option disabled value="">请选择违法类型</option>
                        <option v-for="illegalType in illegalTypeObject.illegalType" :value="illegalType.value">{{illegalType.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">车辆品牌</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.vehicleBrand" placeholder="车辆品牌"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">车辆类型</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="车辆类型" v-model="reportInfo.vehicleType">
                        <option disabled value="">请选择车辆类型</option>
                        <option v-for="vehicleType in vehicleTypeObject.vehicleType" :value="vehicleType.value">{{vehicleType.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">车辆颜色</div>
                <div class="col-sm-10" style="width: 70%;">
                    <select class="form-control" placeholder="车辆颜色" v-model="reportInfo.vehicleColor">
                        <option disabled value="">请选择车辆颜色</option>
                        <option v-for="vehicleColor in vehicleColorObject.carColor" :value="vehicleColor.value">{{vehicleColor.text}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">车辆型号</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.vehicleModel" placeholder="车辆型号"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" style="width: 30%;">所有人</div>
                <div class="col-sm-10" style="width: 70%;">
                    <input type="text" class="form-control" width="80%" v-model="reportInfo.illegalOwnerName" placeholder="所有人"/>
                </div>
            </div>
            <div class="form-group bottom-button">
                <input type="button" class="btn btn-primary" @click="reportAuditSave" value="保存"/>
                <input type="button" class="btn btn-warning" @click="" value="重置"/>
                <input type="button" class="btn btn-warning" @click="" value="通过"/>
                <input type="button" class="btn btn-warning" @click="" value="无效"/>
            </div>
        </div>
    </div>
    <div class="col-sm-10" style="width: 20%; height: 500px ; float: left">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <!--地图定位-->
    <div class="modal fade" id="report_location_map_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 500px ; width: 600px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="mapViewLabel">
                        <!--{{title}}-->
                        地图定位
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="map" class="x-hidden"></div>
                    <script src="${request.contextPath}/statics/map/getMapInfo.js"></script>

                    <!--<div class="form-horizontal">-->
                        <!--<div class="form-group">-->

                        <!--</div>-->
                    <!--</div>-->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>



    <!--违法路段选择-->
    <div class="modal fade" id="illegal_location_select_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 660px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="illegalLocationLabel">
                        <!--{{title}}-->
                        违法路段[双击选择]
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-10" style="width: 80%; padding-right: 2px">
                                <input type="text" class="form-control" v-model="illegalLocationQuery.street" @keyup.enter="query" placeholder="违法路段">
                            </div>
                            <a class="btn btn-default" @click="queryillegalLocation">查询</a>
                        </div>
                        <table id="jqGrid_illegalLocationList"></table>
                        <div id="jqGridPager_illegalLocationList"></div>
                    </div>
                </div>
                <!--<div class="modal-footer">-->
                    <!--<input type="button" class="btn btn-primary" value="确定"/>-->
                    <!--<button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>-->
                <!--</div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

<script type="text/javascript" src="${request.contextPath}/statics/js/swfobject.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/audioplayer.js"></script>
<script src="${request.contextPath}/statics/js/modules/recorderReport/reportAudit.js?_${.now?long}"></script>
</body>
</html>